import React from "react";
import {
  Modal,
  ModalContent,
  ModalHeader,
  ModalBody,
  ModalFooter,
  Button,
  Card,
  CardBody,
  Divider,
  Image,
  Chip,
  Progress,
  Avatar
} from "@nextui-org/react";

export interface ProjectIntroModalProps {
  isOpen: boolean;
  onOpenChange: () => void;
}

export default function ProjectIntroModal({ isOpen, onOpenChange }: ProjectIntroModalProps) {
  return (
    <Modal
      isOpen={isOpen}
      onOpenChange={onOpenChange}
      size="4xl"
      scrollBehavior="inside"
      backdrop="blur"
    >
      <ModalContent>
        {(onClose) => (
          <>
            <ModalHeader className="flex flex-col gap-1">
              <h2 className="text-xl font-bold">基于Spring Cloud+React个人在线云储笔记微服务平台</h2>
            </ModalHeader>
            <ModalBody>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div className="md:col-span-2">
                  <Card className="bg-gradient-to-br from-indigo-100 to-pink-100 dark:from-indigo-900/40 dark:to-pink-900/40 h-full">
                    <CardBody>
                      <h3 className="text-lg font-bold mb-2">项目概述</h3>
                      <p className="text-sm text-default-700 dark:text-default-400">
                        Me Notes是一个完全开源的在线云笔记平台，基于Spring Cloud微服务架构与React前端技术栈构建。
                        该平台为用户提供高效、安全的个人知识管理解决方案，支持多终端同步、实时协作以及AI辅助内容创作。
                      </p>
                      <Divider className="my-3" />
                      <h3 className="text-lg font-bold mb-2">关键特性</h3>
                      <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
                        <Chip color="primary" variant="flat" className="pl-2">✓ 微服务分布式架构</Chip>
                        <Chip color="primary" variant="flat" className="pl-2">✓ Docker容器化部署</Chip>
                        <Chip color="primary" variant="flat" className="pl-2">✓ Markdown全支持</Chip>
                        <Chip color="primary" variant="flat" className="pl-2">✓ OAuth2.0安全认证</Chip>
                        <Chip color="primary" variant="flat" className="pl-2">✓ 实时数据同步</Chip>
                        <Chip color="primary" variant="flat" className="pl-2">✓ AI辅助内容创作</Chip>
                        <Chip color="primary" variant="flat" className="pl-2">✓ 多设备响应式布局</Chip>
                        <Chip color="primary" variant="flat" className="pl-2">✓ 离线编辑支持</Chip>
                      </div>
                    </CardBody>
                  </Card>
                </div>

                <div className="flex flex-col gap-4">
                  <Card className="h-full">
                    <CardBody>
                      <h3 className="text-lg font-bold mb-2">项目数据</h3>
                      <div className="space-y-4">
                        <div>
                          <div className="flex justify-between items-center mb-1">
                            <span className="text-small">开发进度</span>
                            <span className="text-small text-default-400">92%</span>
                          </div>
                          <Progress color="success" value={92} className="h-2" />
                        </div>
                        <div>
                          <div className="flex justify-between items-center mb-1">
                            <span className="text-small">文档完成度</span>
                            <span className="text-small text-default-400">98%</span>
                          </div>
                          <Progress color="secondary" value={98} className="h-2" />
                        </div>
                      </div>
                    </CardBody>
                  </Card>

                  <Card className="h-full">
                    <CardBody>
                      <h3 className="text-lg font-bold mb-2">项目成员</h3>
                      <div className="space-y-3">
                        <div className="flex items-center gap-2">
                          <Avatar
                            size="sm"
                            src="https://q1.qlogo.cn/g?b=qq&nk=3487297072&s=100"
                          />
                          <div>
                            <p className="text-small font-medium">Evan</p>
                            <p className="text-xs text-default-500">项目负责人</p>
                          </div>
                        </div>
                        <div className="flex items-center gap-2">
                          <Avatar
                            size="sm"
                            src="https://q1.qlogo.cn/g?b=qq&nk=3194464047&s=100"
                          />
                          <div>
                            <p className="text-small font-medium">君君</p>
                            <p className="text-xs text-default-500">技术顾问</p>
                          </div>
                        </div>
                      </div>
                    </CardBody>
                  </Card>
                </div>
              </div>

              <Divider className="my-4" />

              <h3 className="text-lg font-bold mb-3">技术架构</h3>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <Card className="h-full">
                  <CardBody>
                    <h4 className="text-medium font-bold mb-2">后端技术栈</h4>
                    <div className="space-y-2">
                      <div>
                        <p className="text-small font-medium">微服务框架</p>
                        <p className="text-small text-default-500">Spring Cloud、Nacos、Gateway</p>
                      </div>
                      <div>
                        <p className="text-small font-medium">数据存储</p>
                        <p className="text-small text-default-500">MySQL、MongoDB、Redis</p>
                      </div>
                      <div>
                        <p className="text-small font-medium">安全框架</p>
                        <p className="text-small text-default-500">Spring Security、OAuth2.0、JWT</p>
                      </div>
                      <div>
                        <p className="text-small font-medium">部署环境</p>
                        <p className="text-small text-default-500">Docker、Kubernetes、Jenkins</p>
                      </div>
                    </div>
                  </CardBody>
                </Card>

                <Card className="h-full">
                  <CardBody>
                    <h4 className="text-medium font-bold mb-2">前端技术栈</h4>
                    <div className="space-y-2">
                      <div>
                        <p className="text-small font-medium">UI框架</p>
                        <p className="text-small text-default-500">React、Next.js、TailwindCSS</p>
                      </div>
                      <div>
                        <p className="text-small font-medium">组件库</p>
                        <p className="text-small text-default-500">NextUI、Radix UI、React Icons</p>
                      </div>
                      <div>
                        <p className="text-small font-medium">状态管理</p>
                        <p className="text-small text-default-500">React Context、SWR</p>
                      </div>
                      <div>
                        <p className="text-small font-medium">编辑器</p>
                        <p className="text-small text-default-500">React Markdown、CodeMirror</p>
                      </div>
                    </div>
                  </CardBody>
                </Card>
              </div>

              <Divider className="my-4" />

              <div className="text-center py-2 justify-center items-center">
                <h3 className="text-lg font-bold mb-2">项目架构图</h3>
                <Image
                  alt="项目架构图"
                  src="https://evan-1304983303.cos.ap-nanjing.myqcloud.com/note/design_TIP.png"
                  className="object-contain mx-auto"
                />
                <p className="text-small text-default-500 mt-2">Me Notes微服务架构示意图</p>
              </div>
            </ModalBody>
            <ModalFooter>
              <Button color="primary" variant="light" onPress={onClose}>
                关闭
              </Button>
              <Button
                color="primary"
                href="https://gitee.com/uyevan/wow-note-spring"
                as="a"
                target="_blank"
              >
                查看源码
              </Button>
            </ModalFooter>
          </>
        )}
      </ModalContent>
    </Modal>
  );
} 